import React, { Component } from "react";

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "../pages/Home.jsx";
import AsyncComponent from "../components/AsyncComponent";
const Stuff = AsyncComponent(() => import("../pages/Stuff"));
const Contact = AsyncComponent(() => import("../pages/Contact"));
const Connect = AsyncComponent(() => import("../pages/Connect"));
class index extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <h1>Simple SPA</h1>
          <ul className="header">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/stuff">Stuff</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>

            <li><NavLink to="/Connect">Connect</NavLink></li>

          </ul>
          <div className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/stuff" component={Stuff}/>
            <Route path="/contact" component={Contact}/>
            <Route exact path="/Connect" component={Connect}/>
          </div>
        </div>
      </HashRouter>
    );
  }
}
export default index;
